<template>
    <div>

        <van-nav-bar
            title="不凡"
            left-text="返回"
            @click-left="onClickLeft"
            />


        <div class="topimg"  v-for="item in  list " :key="item.id">
                    <img :src="item.scene_pic_url" alt="">
        </div>
        <p class="topic-title">专题推荐</p>
        <div class="topbox" v-for="item in list" :key="item.id">
                    <div class="imgbox">
                            <img :src="item.scene_pic_url" alt="">
                            <p>{{item.title}}</p>
                    </div>
        </div>
    </div>
</template>

<script>
import {topiclist } from "../../../api/Home/index.js"
    export default {
            data() {
                return {
                   list:[],
                }
            },
            methods:{
                    onClickLeft(){
                        this.$router.go(-1)
                    }
            },
            created() {
                topiclist({page:this.$route.query.page}).then(res=>{
                    console.log(res);
                    this.list = res.recommendList

                })
            },
    }
</script>

<style lang="scss" scoped>
    .topimg {
        width: 100%;
            img {
                width: 100%;
                height: 232px;
            }
    }
    .topic-title {
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: #333;
    }
    .topbox {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        img {
            display: block;
            width: 100%;
            height: 139.06px;
            // background-color: green;
        }
        p {
            font-size: 16px;
        }
    }
</style>